<!DOCTYPE html>
<#assign ctx=Session.basePath>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>水位管理</title>
    <script>
        var shipid = '<#if shipid??>${shipid}<#else></#if>';
        var company =  '<#if company??>${company}<#else></#if>';
    </script>
    <link href="${ctx}/easyui/themes/bootstrap/easyui.css" rel="stylesheet" />
    <link href="${ctx}/easyui/themes/icon.css" rel="stylesheet" />
    <link href="${ctx}/inspiniain/font-awesome/css/font-awesome.css" rel="stylesheet">
    <script src="${ctx}/js/jquery-1.12.2.min.js"></script>
    <script src="${ctx}/lib/jquery.form.js"></script>
    <script src="${ctx}/easyui/jquery.easyui.min.js"></script>
    <script src="${ctx}/easyui/locale/easyui-lang-zh_CN.js"></script>
    <script src="${ctx}/pagination/js/layer/layer.js"></script>
    <script>
        function onSubmit() {
            $('#contentForm').form('submit',{
                onSubmit:function(){
                    return $(this).form('enableValidation').form('validate');
                }
            });
        }
        function submitForm(){
            var valid = $("#contentForm").form('enableValidation').form('validate');
            if(valid){
                $("#contentForm").ajaxSubmit(function (response) {
                    if(response.success){
                        $("#window").window('close');
                        $('#dg').datagrid().load()
                    }else{
                        layer.msg("保存失败");
                    }
                })
            }
        }

        function addRows(index,obj){
            $(obj).css("display","none");
            index++;
            var html ="<tr>";
            html+="<td><input type='text' class='easyui-validatebox easyui-numberbox' data-options='required:true' id = 'longitude"+index+"' min='-180' max='180'precision='6' name='longitude' placeholder='经度'  style='width: 125px' /></td>";
            html+="<td><input type='text' class='easyui-validatebox easyui-numberbox' data-options='required:true' id = 'latitude"+index+"'min='-90' max='90'precision='6' name='latitude' placeholder='纬度' style='width: 125px' /></td>";
            html+="<td><a href='#' onclick='addRows("+index+",this)'>+</a></td>";
            html +="<tr>";
            $("#sub_table").append(html);
            var lon="#longitude"+index;
            $(lon).numberbox({
                required:true
            });
            var latt= "#latitude"+index;
            $(latt).numberbox({
                required:true
            });
            $('input').textbox();
        }

    </script>
    <script type="text/javascript">
        function loadAll(){
            var pager = $('#dg').datagrid({
                fitColumns:true,
                fit: true,
                loadFilter: function(data){
                    if(data != null && data.rows != null){
                        for(var i = 0; i < data.rows.length; i++){
                            var record = data.rows[i];
                            var isShow="";
                            if(record.reserve2 == "1"){
                                isShow="显示";
                            }else if(record.reserve2 == "2"){
                                isShow="隐藏";
                            }else{
                                isShow="待定";
                            }
                            var midLon = record.midLon;
                            var midLat = record.midLat; //coordinate
                            var position = "<a href='#' onclick='locationMap(\""+midLon+"\",\""+midLat+"\",\""+record.reserve3+"\",\""+record.reserve2+"\",\""+record.id+"\")'><i style='font-size:20px;' class='fa fa-map-marker' aria-hidden='true'></i></a>";
                            var deleteWaters = "<a href='#' onclick='deleteWaters(\""+midLon+"\",\""+midLat+"\",\""+record.areaName+"\",\""+record.id+"\")'>删除</a>";
                            record.delWaters = deleteWaters;
                            record.position=position;
                            record.Show="<a href='#' onclick='hideWatersOnMap(\""+midLon+"\",\""+midLat+"\",\""+record.areaName+"\",\""+record.reserve2+"\",\""+record.id+"\")'>"+isShow+"</a>";
                            if(record.remark!=null){
                                if(record.remark.length>18){
                                    record.remark = "<span title='"+record.remark+"'>"+record.remark.substring(0,18)+"......"+"</span>";
                                }else{
                                    record.remark = "<span>"+record.remark+"</span>";
                                }
                            }
                        }
                    }
                    return data;
                }
            });
        }
        $(function(){
            loadAll();
            $("#area").combobox({
                url:'${ctx}/dict/findByType?type=msa_area',
                valueFiled:'val',
                textField:'label',
                onLoadSuccess:function(param){
                    $("#area").append("<option value='0'>辖区</option>")
                }
            });
            $(".btn-add").click(function () {
                $("#contentForm").form("clear");
                $("#window").window('open');

            })
            $(".btn-search").click(function () {
                $('#dg').datagrid("load",{
                    type : $("#watersType").combobox('getValue')
                })
            })
        })
        function deleteWaters(lon,lat,name,id){
            $.ajax({
                url:'${ctx}/manage/waters/info/delWaters',
                data:{id:id},
                success: function (data) {
                    if(data){
                        loadAll();
                        window.parent.hidePop(window.parent.mapArray[0]);
                        window.parent.romoveFeature(id);
                    }
                }
            });
        }
        function locationMap(lon,lat,reserve3,reserve2,id) {
            if(reserve2=="1"){
                window.parent.reportLineSource.clear();
                window.parent.waterSource.clear();
                window.parent.locWater(lon,lat,reserve3);
                window.parent.setPolygon(id);
            }
        }
        function hideWatersOnMap(lon,lat,areaName,showId,id){
            if(showId=="1"){
                window.parent.hidePop(window.parent.mapArray[0]);
                window.parent.romoveFeature(id);
            }
            changeShow(showId,id);
        }

        function changeShow(show,id){
            $.ajax({
                url:'${ctx}/manage/waters/info/updateState',
                data:{reserve2:show,id:id},
                success: function (data) {
                    if(data){
                        loadAll();
                    }
                }
            });

        }
    </script>
    <style type="text/css">
        a{
            text-decoration: none;
        }
    </style>
</head>
<body>

<div id="tb" style="padding:5px;height:auto">
    <div>
        水域类型: <select id="watersType" class="easyui-combobox" style="width:120px">
        <option value="0">所有水域</option>
        <option value="1">一级水域</option>
        <option value="2">二级水域</option>
    </select>
        <a href="#" class="easyui-linkbutton btn-search" iconCls="icon-search" style="width: 80px;">查找</a>
        <a href="#" class="easyui-linkbutton btn-add" iconCls="icon-add" style="width: 80px;">新增</a>
    </div>
</div>

<table id="dg"
       data-options="rownumbers:true,singleSelect:true,pagination:true,url:'${ctx}/manage/waters/info/ajax/list?shipid=<#if shipid??>${shipid}<#else></#if>&company=<#if company??>${company}<#else></#if>',method:'post',toolbar:'#tb'">
    <thead>
    <tr>
        <th data-options="field:'reserve3',width:120">水域名称</th>
        <th data-options="field:'waterTypeName',width:70">水域类型</th>
        <th data-options="field:'areaName',width:70">辖区</th>
        <th data-options="field:'remark',width:230">说明</th>
        <th data-options="field:'Show',width:60,align:'center'">显示</th>
        <th data-options="field:'delWaters',width:60,align:'center'">删除</th>
        <th data-options="field:'position',width:60,align:'center'">定位</th>
    </tr>
    </thead>
</table>

<div id="window" class="easyui-window" title="添加水域" data-options="modal:false,closed:true" inline="false"
     style="width:500px;height:460px;padding:10px;">
    <div class="easyui-layout" data-options="fit:true">
        <div data-options="region:'center'">
            <form id="contentForm" class="form-horizontal" method="post" action="/manage/waters/info/add" style="padding: 20px;"
                  data-parsley-validate="" novalidate="novalidate">
                <table cellpadding="5">
                    <tr>
                        <td style="width: 100px">
                            水域名称：<span class="text-danger">*</span>
                        </td>
                        <td style="width: 300px;">
                            <input type="text" class='easyui-validatebox' data-options="required:true" id="reserve3" name="reserve3"  placeholder="水域名称" style="width: 260px" />
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 100px">
                            水域类型：<span class="text-danger">*</span>
                        </td>
                        <td style="width: 300px;">
                            <select id="waterstype" name="waterstype" data-options="required:true" class="easyui-combobox easyui-validatebox" style="width:260px">
                                <option value="1" selected>一级水域</option>
                                <option value="2">二级水域</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 100px">
                            <label class="col-sm-4 control-label">辖区：<span class="text-danger">*</span></label>
                        </td>
                        <td style="width: 300px">
                            <select id="area" class="easyui-combobox easyui-validatebox" data-options="required:true" name="area" style="width: 260px" >
                                <option value="0">辖区</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 100px">
                            <label class="col-sm-4 control-label">位置：<span class="text-danger">*</span></label>
                        </td>
                        <td style="width: 300px">
                            <table id="sub_table">
                                <tr>
                                    <td><input type="text" class='easyui-validatebox easyui-numberbox' data-options="required:true" id="longitude1" min="-180" max="180" name="longitude" precision="6" placeholder="经度" style="width: 125px" /></td>
                                    <td><input type="text" class='easyui-validatebox easyui-numberbox' data-options="required:true" id="latitude1"  min="-90" max="90" name="latitude" precision="6" placeholder="纬度"  style="width: 125px" /></td>
                                </tr>
                                <tr>
                                    <td><input type="text" class="easyui-validatebox easyui-numberbox" data-options="required:true" id="longitude2" min="-180" max="180" precision="6" name="longitude" placeholder="经度" style="width: 125px" /></td>
                                    <td><input type="text" class="easyui-validatebox easyui-numberbox" data-options="required:true" id="latitude2" min="-90" max="90" precision="6" name="latitude" placeholder="纬度"  style="width: 125px" /></td>
                                </tr>
                                <tr>
                                    <td><input type="text" class="easyui-validatebox easyui-numberbox" data-options="required:true" id="longitude3" min="-180" max="180" precision="6" name="longitude" placeholder="经度" style="width: 125px" /></td>
                                    <td><input type="text" class="easyui-validatebox easyui-numberbox" data-options="required:true" id="latitude3" min="-90" max="90" precision="6" name="latitude" placeholder="纬度"  style="width: 125px" /></td>
                                </tr>
                                <tr>
                                    <td><input type="text" class="easyui-validatebox easyui-numberbox" data-options="required:true" id="longitude4" min="-180" max="180" precision="6" name="longitude" placeholder="经度" style="width: 125px" /></td>
                                    <td><input type="text" class="easyui-validatebox easyui-numberbox" data-options="required:true" id="latitude4" min="-90" max="90" precision="6" name="latitude" placeholder="纬度"  style="width: 125px" /></td>
                                    <td><a href="#" onclick="addRows(4,this)">+</a></td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 100px">
                            显示：<span class="text-danger">*</span>
                        </td>
                        <td style="width: 300px;">
                            <select id="reserve2" name="reserve2" data-options="required:true" class="easyui-combobox easyui-validatebox" style="width:260px">
                                <option value="1" selected>显示</option>
                                <option value="2">隐藏</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 100px">
                            备注：<span class="text-danger">*</span>
                        </td>
                        <td style="width: 300px;">
                            <textarea placeholder="说明,100字以内" data-options="multiline:true,validType:'length[1,100]'" name="remark" style="width: 260px; height: 100px;"  class="form-control easyui-textbox" rows="6" ></textarea>
                        </td>
                    </tr>
                </table>
            </form>
        </div>
        <div data-options="region:'south',border:false" style="text-align:right;padding:5px 0 0;">
            <a class="easyui-linkbutton" data-options="iconCls:'icon-ok'" href="javascript:void(0)" onclick="submitForm()" style="width:80px">提交</a>
            <a class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" href="javascript:void(0)" onclick="$('#window').window('close')" style="width:80px">取消</a>
        </div>
    </div>
</div>
</body>
</html>